<template>
    <view>
        <!--#ifdef APP-PLUS-->
        <view class="lz-status_bar">
            <view class="lz-top_view"></view>
        </view>
        <!--#endif-->
        <view class="kaoshi-head">
            <view class="kaoshi-head-top">
                <view class="kaoshi-head-left" @tap="$openrul('/pages/auth/choiceSubject/index')">
                    <view>切换</view>
                    <view class="iconfont icon-weibiaoti"></view>
                </view>
                <view class="kaoshi-head-kemu">
                    {{subject.subject_name}}
                </view>
                <view class="kaoshi-head-right">
                    <view class="iconfont icon-datiqia" @tap="navTo('/pages/my/learn/index')"></view>
                </view>
            </view>
        </view>
        <view class="kaoshi-index-content">
            <view class="kaoshi-head-banner">
                <swiper
                        class="swiper"
                        :indicator-dots="swiper_config.indicatorDots"
                        :autoplay="swiper_config.autoplay"
                        :interval="swiper_config.interval"
                        :duration="swiper_config.duration"
                >
                    <swiper-item v-for="(item, index) in swiper_list" :key="index">
                        <view class="page-section swiper">
                            <view class="page-section-spacing"><img :src="item.image"/></view>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
            <view class="kaoshi-index-nav">
                <view class="kaoshi-index-nav-flex"
                      @tap="$openrul('/pages/questionBank/questionBankList/index?from_type=1')">
                    <image :src="static_media.img01" class="kaoshi-index-nav-img"></image>
                    <view>章节练习</view>
                </view>
                <view class="kaoshi-index-nav-flex"
                      @tap="$openrul('/pages/questionBank/questionBankList/index?from_type=2')">
                    <image :src="static_media.img02" class="kaoshi-index-nav-img"></image>
                    <view>历年真题</view>
                </view>
				<view class="kaoshi-index-nav-flex"
				      @tap="navTo('/pages/examination/examinationList/index?from_type=3')">
				    <image :src="static_media.img03" class="kaoshi-index-nav-img"></image>
				    <view>绝密文档</view>
				</view>
                <view class="kaoshi-index-nav-flex"
                      @tap="navTo('/pages/examination/examinationList/index?from_type=2')">
                    <image :src="static_media.img01" class="kaoshi-index-nav-img"></image>
                    <view>模拟题</view>
                </view>
                <view class="kaoshi-index-nav-flex" @tap="navTo('/pages/my/learn/index')">
                    <image :src="static_media.img04" class="kaoshi-index-nav-img"></image>
                    <view>错题集</view>
                </view>
            </view>
        </view>
<!--       <view class="kaoshi-tiku-title" v-if="list.length > 0">
            <view class="kaoshi-tiku-title-l">最新题库</view>
            <navigator open-type="switchTab" url="/pages/questionBank/index" hover-class="none"
                       class="kaoshi-tiku-title-r">
                更多题库
            </navigator>
        </view>
        <view v-for="(item, index) in list" :key="index" class="kaoshi-tiku">
            <view class="kaoshi-tiku-content" @tap="goto_detail(item,'1')">
                <view class="kaoshi-tiku-content-flex">
                    <view class="kaoshi-tiku-content-top">
                        <view>{{item.name}}</view>
                    </view>
                </view>
                <view class="kaoshi-tiku-content-flex">
                    <view class="kaoshi-tiku-content-bottom">
                        <view class="iconfont icon-dui2"></view>
                        <view class="pub-gray">共{{item.total_num}}题</view>
                    </view>
                </view>
            </view>
        </view> -->
    </view>
</template>
<script>
    import {mapState} from 'vuex';
    import Error from '@/core/untils/error/index';

    export default {
        data() {
            return {
                swiper_list: [],
                swiper_config: {
                    indicatorDots: true,
                    autoplay: true,
                    interval: 2000,
                    duration: 500
                },
                list: [],
				subList:[],//科目列表
            };
        },
        onShow() {
            this.get_lunbo_list();
			if(this.subject.id != undefined){
				this.get_tiku_list();
			}
        },
		onLoad(){
			if(this.subject.id == undefined){
				this.getSub();
			}
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true
			})
			// #endif
		},
        computed: {
            ...mapState(['subject', 'userinfo']),
            static_media() {
                return {
                    img01: this.$myConfig.localMedia + '/static/img/index-icon1.png',
                    img02: this.$myConfig.localMedia + '/static/img/index-icon2.png',
                    img03: this.$myConfig.localMedia + '/static/img/index-icon3.png',
                    img04: this.$myConfig.localMedia + '/static/img/index-icon4.png',
                    img05: this.$myConfig.localMedia + '/static/img/home-tk.png',
                };
            }
        },
        methods: {
			//获取科目列表
			async getSub () {
			  let res = await this.$myHttp.post({
			    url: this.$myHttp.urlMap.subjectList,
			    data: {
			      page:1,
			      limit:0
			    }
			  })
			  if (res.code === 1) {
			    this.subList = res.data.data
				this.$store.commit('setSubject', { subject: { id: this.subList[0].id, subject_name: this.subList[0].subject_name } })
				this.get_tiku_list();
			  }
			},
            async get_lunbo_list() {
                let res = await this.$myHttp.post({
                    url: this.$myHttp.urlMap.swiper,
                    data: {
                        searchdb: {
                            code: 'shouye'
                        }
                    }
                });
                if (res.code === 1) {
                    let rows = res.data.data || [];
                    this.swiper_list = rows;
                }
            },
            async get_tiku_list() {
                let res = await this.$myHttp.post({
                    url: this.$myHttp.urlMap.unitList,
                    data: {
                        subject_id: this.subject.id || this.subList[0].id,
                        unit_id: 0,
                        page: 1,
                        limit: 10
                    },
                });
                if (res.code === 1) {
                    this.list = res.data.data;
                }
            },
            goto_detail(item, type) {
                if (item.total_num == 0) { //如果目录下没有题目，提示用户
                    this.$myUtils.$prompt.showToast({
                        icon: 'none',
                        title: '当前目录下没有题目，请联系老师'
                    });
                    return
                }
                if (type == '1') {
                    if (item.is_last == 0) {
                        //非终极栏目，点击进入下级栏目
                        this.$openrul('/pages/questionBank/detail/index?id=' + item.id + '&from_type=1' + '&name=' + item.name)
                    } else if (item.is_last == 1) {
                        if (this.$myUserLogin.getToken()) {
                            //终极栏目，点击进入答题页
                            this.$openrul('/pages/questionBank/questionBankAnswer/index?id=' + item.id + '&from_type=1' + '&name=' + item.name)
                        } else {
                            Error.errorNotLoggedIn();
                        }
                    }
                } else if (type == '2') {
                    if (this.$myUserLogin.getToken()) {
                        //历年真题都是终极栏目，点击进入答题页
                        this.$openrul('/pages/questionBank/questionBankAnswer/index?id=' + item.id + '&from_type=2' + '&name=' + item.name)
                    } else {
                        Error.errorNotLoggedIn();
                    }
                }
            },
            //跳转前需要登录
            navTo(url) {
                if (this.$myUserLogin.getToken()) {
                    this.$openrul(url)
                } else {
                    Error.errorNotLoggedIn();
                }
            }
        }
    };
</script>
<style>
    page {
        background: #f6f6f6;
    }

    .kaoshi-head {
        background: none;
        position: relative;
        top: 0;
        background: #fff;
        border-bottom: none;
    }

    .kaoshi-head-top {
        color: #000;
        line-height: 58px;
    }

    .kaoshi-head-top .kaoshi-head-left {
        flex: 1;
        display: flex;
        align-items: center;
    }

    .kaoshi-head-top .kaoshi-head-left .icon-weibiaoti {
        padding-left: 4px;
    }

    .kaoshi-head-top .kaoshi-head-kemu {
        flex: 0 0 68%;
        font-size: 16px;
        text-align: center;
    }

    .kaoshi-head-top .kaoshi-head-right {
        width: 11%;
        text-align: right;
    }

    .kaoshi-head-top .kaoshi-head-right .icon-datiqia {
        font-size: 22px;
    }

    .kaoshi-index-content {
        overflow: hidden;
        background: #fff;
    }

    .kaoshi-head-banner {
        background: #fff;
        border-radius: 10px;
        width: 92%;
        margin: 6px auto;
        box-shadow: 0 3px 8px rgb(0 0 0 / 11%);
        margin-bottom: 19px;
    }

    .kaoshi-head-banner img {
        width: 100%;
        height: 160px;
        border-radius: 10px;
    }

    .kaoshi-head-banner .uni-swiper-dot-active::before {
        background: #3c7bfc !important;
    }

    .swiper {
        height: 160px !important;
    }

    .kaoshi-index-nav {
        display: flex;
        justify-content: center;
        text-align: center;
        font-size: 14px;
        color: #605d70;
        padding: 4px 0 16px;
        z-index: 10000;
    }

    .kaoshi-index-nav .kaoshi-index-nav-flex {
        flex: 1;
    }

    .kaoshi-index-nav-img {
        width: 32px;
        height: 32px;
    }

    .kaoshi-tiku-title {
        width: 92%;
        margin: 0 auto;
        padding: 12px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .kaoshi-tiku-title-l {
        display: flex;
        font-weight: bold;
        font-size: 17px;
    }
    .kaoshi-tiku-title-r {
        color: #000;
        border: solid 1px #d8d8d8;
        padding: 5px 13px;
        border-radius: 35px;
        font-size: 12px;
    }

    .kaoshi-tiku {
        background: #fff;
    }

    .kaoshi-tiku-img {
        width: 20px;
        height: 20px;
        margin-right: 6px;
    }


    .kaoshi-tiku-content {
        width: 92%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        font-size: 14px;
        padding: 10px 0;
        border-bottom: solid 1px #f5f5f5;
    }

    .kaoshi-tiku-content-flex {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: inherit;
    }

    .kaoshi-tiku-content .kaoshi-tiku-content-flex:first-child {
        padding-bottom: 6px;
    }

    .kaoshi-tiku-content .kaoshi-tiku-content-flex:last-child {
        font-size: 14px;
    }

    .kaoshi-tiku-content-top {
        display: flex;
        align-items: center;
        flex: 1;
        font-size: 16px;
    }

    .kaoshi-tiku-content-top img {
        width: 20px;
        height: 22px;
        margin-right: 10px;
    }

    .kaoshi-tiku-content-bottom {
        font-size: 13px;
        display: flex;
        align-items: center;
    }

    .kaoshi-tiku-content-flex .icon-dui2 {
        margin: 2px 2px 0 0;
        color: #3c7bfc;
    }
</style>
